<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝天驾校 - 在线报名</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        /* 导航栏样式开始 */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background-color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
        }

        .logo {
            display: flex;
            align-items: center;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background-color: #66B1FF;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }

        .logo-text {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }

        .nav-links {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .nav-links li {
            margin-left: 30px;
        }

        .nav-links a {
            text-decoration: none;
            color: #34495e;
            font-size: 16px;
            font-weight: 500;
            transition: color 0.3s ease;
        }
        /* 导航栏样式结束 */

        :root {
            --primary-color: #e1f5fe;
            --secondary-color: #4fc3f7;
            --accent-color: #0288d1;
            --text-color: #333;
            --light-color: #ffffff;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            color: var(--text-color);
            background-color: var(--light-color);
        }
        
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            background-color: var(--secondary-color);
            color: var(--light-color);
            padding: 20px 0;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .promotion-banner {
            background-color: var(--accent-color);
            color: var(--light-color);
            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
            text-align: center;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .school-info {
            background-color: var(--primary-color);
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .course-list {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
        }
        
        .course-card {
            flex: 1 1 300px;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            background-color: var(--light-color);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .course-card:hover {
            transform: translateY(-5px);
        }
        
        .course-card h3 {
            color: var(--accent-color);
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .price {
            font-size: 24px;
            color: #e53935;
            font-weight: bold;
        }
        
        .registration-form {
            background-color: var(--primary-color);
            padding: 20px;
            border-radius: 5px;
            margin: 20px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: var(--accent-color);
        }
        
        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            background-color: var(--light-color);
        }
        
        button {
            background-color: var(--accent-color);
            color: var(--light-color);
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #0277bd;
        }
        
        .announcement {
            background-color: var(--primary-color);
            padding: 20px;
            border-radius: 5px;
            margin: 20px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .announcement h2 {
            color: var(--accent-color);
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
        }
        
        footer {
            background-color: var(--secondary-color);
            color: var(--light-color);
            text-align: center;
            padding: 20px 0;
            margin-top: 30px;
        }
        
        @media (max-width: 768px) {
            .course-list {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="header-container" style="width: 1000px;">
            <div class="logo">
                <div class="logo-icon">
                    <i class="fa fa-car text-white text-xl"></i>
                </div>
                <span class="logo-text">驾校学员交流区</span>
            </div>
            <nav>
                <ul class="nav-links">
                    <a href="/zrz/daohanglanLayui" class="text-dark hover:text-primary nav-link-hover font-medium">首页</a>   
                    <a href="#courses" class="text-dark hover:text-primary nav-link-hover font-medium">课程</a>   
                    <a href="/ljk/coach/index" class="text-dark hover:text-primary nav-link-hover font-medium">教练团队</a>   
                    <a href="/hzj/jiaxiaoguanliList" class="text-dark hover:text-primary nav-link-hover font-medium">基本信息</a>   
                    <a href="/kaiban/page" class="text-dark hover:text-primary nav-link-hover font-medium">开班信息</a>   
                    <a href="/zjy/liuyan" class="text-dark hover:text-primary nav-link-hover font-medium">用户留言</a>   
                    <a href="/zjy/zixun" class="text-dark hover:text-primary nav-link-hover font-medium">用户咨询</a>
                </ul>
            </nav>
            <a href="#" class="contact-button hidden md:block">联系客服</a>
        </div>
    </header>

    <div class="container">
        <div class="promotion-banner">
            🎉 新学员优惠：报名即送理论考试模拟券+免费试驾体验 🎉
        </div>

        <div class="school-info" id="schoolInfo">
            <h2>驾校简介</h2>
            <p id="intro"></p>
            <p><strong>训练场地：</strong><span id="trainingField"></span></p>
            <p><strong>联系方式：</strong><span id="contact"></span></p>
            <p><strong>营业时间：</strong><span id="hours"></span></p>
        </div>

        <h2 style="color: var(--accent-color);">班型与价格</h2>
        <div class="course-list" id="course-list-container">
            <!-- <div class="course-card">
                <h3>基础班</h3>
                <p>适合时间自由的学员</p>
                <ul>
                    <li>理论课程+实操训练</li>
                    <li>教练1对1指导</li>
                    <li>训练时间自选</li>
                </ul>
                <p class="price">¥3,680</p>
                <button>立即报名</button>
            </div>
            <div class="course-card">
                <h3>白领班</h3>
                <p>上班族专属</p>
                <ul>
                    <li>仅周末/晚间训练</li>
                    <li>小班教学</li>
                    <li>预约制训练</li>
                </ul>
                <p class="price">¥4,280</p>
                <button>立即报名</button>
            </div>
            <div class="course-card">
                <h3>速成班</h3>
                <p>快速拿证</p>
                <ul>
                    <li>专属教练</li>
                    <li>优先约考</li>
                    <li>40天快速拿证</li>
                </ul>
                <p class="price">¥5,980</p>
                <button>立即报名</button>
            </div> -->
        </div>

        <div class="registration-form">
            <h2 style="color: var(--accent-color);">在线报名</h2>
            <form id="registrationForm">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="phone">手机号码</label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="idNumber">身份证号</label>
                    <input type="text" id="idNumber" name="idNumber" required>
                </div>
                <div class="form-group">
                    <label for="courseType">选择班型</label>
                    <select id="courseType" name="courseType" required>
                        <option value="">请选择班型</option>
                        <option value="基础班">基础班</option>
                        <option value="白领班">白领班</option>
                        <option value="速成班">速成班</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="licenseType">驾照类型</label>
                    <select id="licenseType" name="licenseType" required>
                        <option value="">请选择驾照类型</option>
                        <option value="C1">C1（小型汽车）</option>
                        <option value="C2">C2（自动挡）</option>
                    </select>
                </div>
                <button type="submit">提交报名</button>
            </form>
        </div>

        <div class="announcement">
            <h2>最新公告</h2>
            <ul id="announcementList">
            </ul>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>© 2023 蓝天驾校 版权所有</p>
            <p>地址：京海市集美区玉泉路66号 | 咨询电话：400-123-4567</p>
        </div>
    </footer>

    <script>
    // 导航栏滚动效果
    window.addEventListener('scroll', function() {
        const header = document.querySelector('header');
        if (window.scrollY > 50) {
            header.classList.add('shadow-md');
            header.style.padding = '10px 0';
        } else {
            header.classList.remove('shadow-md');
            header.style.padding = '15px 0';
        }
    });

    // 页面加载时从本地存储恢复数据
    document.addEventListener('DOMContentLoaded', function() {
        const savedData = JSON.parse(localStorage.getItem('jiaxiaoFormData')) || {};
        
        // 自动填充表单
        if (savedData) {
            document.getElementById('name').value = savedData.name || '';
            document.getElementById('phone').value = savedData.phone || '';
            document.getElementById('idNumber').value = savedData.idNumber || '';
            document.getElementById('courseType').value = savedData.courseType || '';
            document.getElementById('licenseType').value = savedData.licenseType || '';
        }
        // 加载 id=8 的驾校信息
        loadSchoolInfo(8);
        // === 新增公告加载 ===
        loadAnnouncements();
          // === 新增调用：加载课程信息 ===
        loadCourses();
    });

    // 加载并展示驾校信息
    function loadSchoolInfo(id) {
        fetch(`/hzj/get/${id}`)
            .then(response => response.json())
            .then(data => {
                if (data) {
                    document.getElementById('intro').textContent = data.description || '暂无简介';
                    document.getElementById('trainingField').textContent = data.address || '暂无训练场地信息';
                    document.getElementById('contact').textContent = data.phoneNumber || '暂无联系方式';
                    document.getElementById('hours').textContent = data.operationTime || '暂无营业时间';
                } else {
                    document.getElementById('intro').textContent = '未找到驾校简介';
                    document.getElementById('trainingField').textContent = '未找到训练场地信息';
                    document.getElementById('contact').textContent = '未找到联系方式';
                    document.getElementById('hours').textContent = '未找到营业时间';
                }
            })
            .catch(error => {
                console.error('错误:', error);
                document.getElementById('intro').textContent = '加载简介失败';
                document.getElementById('trainingField').textContent = '加载训练场地信息失败';
                document.getElementById('contact').textContent = '加载联系方式失败';
                document.getElementById('hours').textContent = '加载营业时间失败';
            });
    }

    // 表单提交时调用后端 API
    document.getElementById('registrationForm').addEventListener('submit', function(e) {
        e.preventDefault();

        // 收集表单数据
        const formData = {
            name: document.getElementById('name').value,
            phoneNumber: document.getElementById('phone').value,
            idCard: document.getElementById('idNumber').value,
            classType: document.getElementById('courseType').value,
            licenseType: document.getElementById('licenseType').value
        };

        // 发送 POST 请求到后端 注册报考驾校的信息
        fetch('/api/drivingSchoolRegistration', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应错误');
            }
            return response.text();
        })
        .then(() => {
            alert('报名信息提交成功！');
            // 清空表单
            this.reset();
        })
        .catch(error => {
            console.error('提交失败:', error);
            alert('报名信息提交失败，请稍后重试或联系客服。');
        });
    });

    // ======================================================
// === 新增的函数：加载并显示最新公告 ===
// ======================================================
function loadAnnouncements() {
    const announcementList = document.getElementById('announcementList');
    announcementList.innerHTML = '<li>正在加载最新公告...</li>'; // 添加加载提示

    // 从后端API获取最新的5条公告
    fetch('/api/announcements?pageNum=1&pageSize=5')
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应错误');
            }
            return response.json();
        })
        .then(data => {
            // 清空列表
            announcementList.innerHTML = '';
            
            if (data && data.list && data.list.length > 0) {
                data.list.forEach(item => {
                    const li = document.createElement('li');
                    
                    // 将日期字符串转换为更友好的 YYYY-MM-DD 格式
                    const publishDate = new Date(item.publishDate).toLocaleDateString('zh-CN');
                    
                    li.textContent = `${publishDate}: ${item.title}`;
                    announcementList.appendChild(li);
                });
            } else {
                announcementList.innerHTML = '<li>暂无最新公告</li>';
            }
        })
        .catch(error => {
            console.error('加载公告失败:', error);
            announcementList.innerHTML = '<li>公告加载失败，请稍后重试。</li>';
        });
}
// ======================================================
// === 新增的函数：加载并显示课程班型 ===
// ======================================================
function loadCourses() {
    const courseListContainer = document.getElementById('course-list-container');
    courseListContainer.innerHTML = '<p>正在加载课程信息...</p>';

    // 从后端API获取前3个“启用”状态的课程
    fetch('/api/courses?pageNum=1&pageSize=3&status=启用')
        .then(response => {
            if (!response.ok) {
                throw new Error('网络响应错误');
            }
            return response.json();
        })
        .then(data => {
            courseListContainer.innerHTML = ''; // 清空加载提示
            
            if (data && data.list && data.list.length > 0) {
                // 更新在线报名表单中的班型下拉列表
                const courseTypeDropdown = document.getElementById('courseType');
                courseTypeDropdown.innerHTML = '<option value="">请选择班型</option>'; // 重置并添加默认选项

                data.list.forEach(course => {
                    // 动态创建课程卡片
                    let servicesHtml = '<li>暂无服务详情</li>';
                    if (course.includedServices) {
                        // 尝试按常用分隔符切分服务内容
                        servicesHtml = course.includedServices.split(/[+、,，]/)
                            .map(service => `<li>${service.trim()}</li>`).join('');
                    }

                    const cardHtml = `
                        <div class="course-card">
                            <h3>${course.name}</h3>
                            <p>${course.description || ''}</p>
                            <ul>${servicesHtml}</ul>
                            <p class="price">¥${course.price ? course.price.toFixed(2) : 'N/A'}</p>
                            <button onclick="selectCourseAndScroll('${course.name}')">立即报名</button>
                        </div>
                    `;
                    courseListContainer.innerHTML += cardHtml;

                    // 动态填充报名表单的下拉选项
                    const option = document.createElement('option');
                    option.value = course.name;
                    option.textContent = course.name;
                    courseTypeDropdown.appendChild(option);
                });
            } else {
                courseListContainer.innerHTML = '<p>暂无开放报名的班型，敬请期待！</p>';
            }
        })
        .catch(error => {
            console.error('加载课程失败:', error);
            courseListContainer.innerHTML = '<p>课程信息加载失败，请刷新页面或稍后重试。</p>';
        });
}
</script>
</body>
</html>